import React, { useState } from 'react'
import { Table, Tooltip, Space, Button, Flex } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { updateafter, getafterdetail } from '../../../../request/api'
import Pop_up_layers from './Pop_up_layers'


export default function To_be_reviewed(props) {
  const { afterdata, getall } = props

  const [model_type, setmodel_type] = useState(false)
  const updatmodel_type = (item: boolean) => {
    setmodel_type(item)
  }

  type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
  const columns: TableColumnsType = [
    { title: '账号流水号', dataIndex: 'key' },
    { title: '账单类型', dataIndex: 'billtype' },
    { title: '售后编号', dataIndex: 'After_sales_managementid' },
    { title: '退款金额', dataIndex: 'shop_price' },
    { title: '扣除佣金', dataIndex: 'commission' },
    { title: '时间', dataIndex: 'buy_time' },
    { title: '状态', dataIndex: 'state' },
    { title: '备注', dataIndex: 'remark' },
    {
      title: '操作',
      key: '_id',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => {
            if (selectedRowKeys.length == 0) {
              alert('请选择订单')
            } else if (selectedRowKeys.length > 1) {
              alert('只能选择一个订单')
            } else {
              Getafterdetail()
            }
          }}>设置 </a>
          <a onClick={() => {
            if (selectedRowKeys.length == 0) {
              alert('请选择订单')
            } else if (selectedRowKeys.length > 1) {
              alert('只能选择一个订单')
            } else {
              Updateafter('已驳回')
            }
          }}>详情 </a>
        </Space>
      ),
    },
  ];




  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  // 数据渲染
  const dataSource = afterdata.filter(ele=>ele.billtype==false).map((item) => ({
    key: item._id,
    billtype:item.billtype==true?'支付订单':'售后订单' ,
    After_sales_managementid:item.After_sales_managementid._id,
    shop_price:item.After_sales_managementid.shop_price,
    commission:item.goodsid.commission,
    buy_time:item.goodsid.buy_time,
    state:item.state,
    remark:item.remark
  }));


  // 选择项
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
    getid(newSelectedRowKeys)
  };
  const rowSelection: TableRowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;




  const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');
  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };



  // 获取详细数据售后数据
  const [after_data, setafter_data] = useState<any>({})
  const Getafterdetail = async () => {
    setmodel_type(true)
    const res = await getafterdetail({ _id: String(selectedRowKeys[0]) })
    setafter_data(res.data)
  }




  return (
    <div>
      <Flex gap="middle" vertical>
        {/* <Pop_up_layers model_type={model_type} updatmodel_type={updatmodel_type} after_data={after_data}></Pop_up_layers> */}
        <Table rowSelection={rowSelection} columns={columns} dataSource={dataSource} />
      </Flex>
    </div>
  )
}
